<!DOCTYPE html>

<html lang='en'>

<head>

<meta charset='UTF-8'>

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="keywords" content="">
<meta name="description" content="">

<title>摄像头拍照</title>
<style>
body {
    margin: 0;
    text-align: center;
}
#clipArea {
    margin: 10px;
    user-select: none;
    overflow: hidden;
    position: relative;
    height: 300px;
}
#clipBtn {
    margin-top:10px;
}
#view {
    margin: 0 auto;
    width: 200px;
    height: 200px;
}
.correct:before {
    content: '\2714';
    color: #2121219e;
    float: right;
    font-size: 2rem;

}
.incorrect:before {
    content: '\2716';
    color: #ffffff;
    float: left;
    font-size: 2rem;
}
</style>
</head>
<body>
<input type="file" style="display: none" accept="image/*" capture="camera" id="face_file" multiple="multiple"></input>
<div id="image" >请点击这里拍照</div>
<div id="view"></div>
<div class="cover-wrap" style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 10000000; text-align: center; display: none;">
    <div style="width:80%;margin:1% auto;margin-bottom:0px;">
        <span class="status incorrect" id="face"></span>
        <span class="status correct" id="clipBtn"></span>
    </div>
    <div class="" style="width:90%;height:auto;margin:40% auto;background-color:#FFFFFF;overflow: hidden;border-radius:4px;">
        <div id="clipArea"></div>
    </div>  
</div>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/iscroll-zoom-min.js"></script>
<script src="js/lrz.all.bundle.js"></script>
<script src="js/PhotoClip.js"></script>
<script>
    var pc = new PhotoClip('#clipArea', {
        size: [250,250],
        outputSize: 500,
        outputType:'jpg',
        outputQuality:'1',
        rotateFree:true,
        //adaptive: ['60%', '80%'],
        file: '#face_file',
        view: '#view',
        ok: '#clipBtn',
        //img: 'img/mm.jpg',
        loadStart: function() {
            console.log('开始读取照片');
        },
        loadComplete: function() {
            console.log('照片读取完成');
            $('.cover-wrap').show();
        },
        done: function(dataURL) {
            console.log(dataURL);
             $('.cover-wrap').hide();
        },
        fail: function(msg) {
            alert(msg);
        }
    });
    $(function(){
        $('#image').click(function(){
          $('#face_file').click();
        });
         $('#face').click(function(){
          $('#face_file').click();
        });
        $('#face_file').change(function () {
            objUrl = getObjectURL(this.files[0]);
            if (objUrl) {
                pc.load(objUrl);
            } 
        });

    });
 /**获取路径*/
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
</script>

</body>

</html>